/*************************
author:彭荣贵  date ：2013/10/12

存在bug：
1.动态添加的 canvas在IE中不支持getContext
2.在ＩＥ弹出的层在ｄｉｖ的下面,显示不出来
*************************/

/**获取xmlHttpRequest对象
 * date :2012/11/12
 * */
 var xmlhttp = false;
 var json    = '';
function getXMLHTTPRequest()
{
	try
	{
		 /*firfox */
		xmlhttp = new XMLHttpRequest();
	}catch (err)
	{
		try
		{
			xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
		}catch (err)
		{
			try
			{
				xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
			}
			catch(err)
			{
				xmlhttp =false;
			}
		}
	}
}

//状态改变是执行的函数
function changestate()
{

	if(xmlhttp.readyState==4)
	{
		if(xmlhttp.status==200 || xmlhttp.status==0)
		{
			json = xmlhttp.responseText;
		//	console.log(1);
			console.log(json);
		}
	}
	
	//else if()
}

function getTheComments(commenturl,tag)
{
	getXMLHTTPRequest();
	var url = "comment.php?url="+commenturl+"&tag="+tag;
	xmlhttp.onreadystatechange = changestate;
	xmlhttp.open("post",url,true);
	xmlhttp.send(null);
}


function bookComment(commenturl,tag)
{
	//console.log(commenturl);
	//console.log(tag);

	//console.log(json);
	
	getTheComments(commenturl,tag);
	
	console.log(json);

	document.body.style.overflow = "hidden";
	var screenWidth,htmlHeight,scrollTop;
	/*获取浏览器工作区域的宽度和高度*/
	screenWidth = screen.width;
	htmlHeight= document.body.scrollHeight;/*网页正文全文高*/
	scrollTop = document.documentElement.scrollTop;	//网页被卷去的高

	if(scrollTop==0)
	{
		scrollTop = document.body.scrollTop;
	}


	//console.log(htmlHeight);
	//console.log(scrollTop);


	/*背景DIV进行设置*/
	var bgDiv = document.createElement("div");//创建背景DIV
	bgDiv.setAttribute("id","bgid");
	bgDiv.style.position="absolute";
	bgDiv.style.width = screenWidth+"px";
	bgDiv.style.height= htmlHeight+"px";
	bgDiv.style.background= "#8C8C8C";
	bgDiv.style.opacity="0.9";
	bgDiv.style.filter ="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
	bgDiv.style.zIndex="10000";
	bgDiv.style.top=0+"px";
	bgDiv.style.left=0+"px";
	document.body.appendChild(bgDiv);


	/*开始创建显示层*/
	var commentDiv = document.createElement("div"); //创建评论DIV
	/*开始设置DIV的属性和元素*/
	commentDiv.setAttribute("id","comment");
	commentDiv.setAttribute("align","center");//div居中

	var cwidth,cheight;
	cwidth = 600+"px";
	cheight= 500+"px";
	commentDiv.style.position ="absolute";
	commentDiv.style.left=(screenWidth-600)/2+"px"; //宽度居中
	commentDiv.style.top=scrollTop+40+"px"; //高度在品目中间
	commentDiv.style.height=cheight;
	commentDiv.style.width=cwidth;
	commentDiv.style.textAlign="left";
	commentDiv.style.border="1px solid blue";
	commentDiv.style.background="white";
	commentDiv.style.overflow="scroll";
	commentDiv.style.opacity="1";
	commentDiv.style.zIndex="10001";
	
	document.getElementById("bgid").appendChild(commentDiv);//将commentDIV添加到bgDIV上

	//创建h3标题
	var h3 = document.createElement("h3");
	h3.innerHTML="图书评价信息";
	h3.style.textAlign="center";
	h3.style.color="blue";
	document.getElementById("comment").appendChild(h3);//将h3添加到commentDIV上

	/*创建h4标题*/
	var h4 = document.createElement("h4");
	h4.innerHTML="总体评价";
	h4.style.background="#B6B6B6";
	document.getElementById("comment").appendChild(h4); //将h4添加到commentDIV上

	//创建total_commentDIV
	var total_commentDiv = document.createElement("div");
	total_commentDiv.setAttribute("id","total_comment");
	total_commentDiv.style.marginTop=10+"px";
	total_commentDiv.style.marginBottom=10+"px";
	total_commentDiv.style.marginLeft=75+"px";
	total_commentDiv.style.width=450+"px";
	total_commentDiv.style.textAlign="center"
	total_commentDiv.style.fontSize=15+"px";
	document.getElementById("comment").appendChild(total_commentDiv);



	//创建一个标签
	var p = document.createElement("p");
	p.innerHTML="共有3305人参与评论";
	document.getElementById("total_comment").appendChild(p);


	/******************创建canvas*******************/
	var canvas = document.createElement("canvas");
	canvas.setAttribute("id","c");
	canvas.setAttribute("width",300);
	canvas.setAttribute("height",170);
	document.getElementById("total_comment").appendChild(canvas);


	var h42 = document.createElement("h4");
	h42.innerHTML="评价列表";
	h42.style.background="#B6B6B6";
	document.getElementById("comment").appendChild(h42); //将h42添加到commentDIV上

	var comment_listDiv=document.createElement("div");
	comment_listDiv.setAttribute("id","comment_list");
	document.getElementById("comment").appendChild(comment_listDiv);//将评价列表DIV添加到comment上面

	var u2=document.createElement("ul");
	u2.setAttribute("id","u2");
	u2.style.listStyle="none";
	u2.style.marginTop=5+"px";
	u2.style.marginLeft=3+"px";
	u2.style.fontSize=14+"px";
	document.getElementById("comment_list").appendChild(u2);

	/***********动态数据生成***********/
	var j;
	for(var i=0;i<5;i++)
	{
		j=i;
		i=document.createElement("li");
		i.style.height=100+"px";
		i.innerHTML="<span>标题：<span style='font-weight: bolder;font-size: 15px;color: blue;'><感谢></span></span><br>"+
		"<span style='padding-left: 10px;padding-top: 2px;color: #2D2D2D;'><非常满意，非常感谢网站工作人员></span><br>"+
		"<span style='padding-left: 300px;color: #888;font-size: 13px;'>评论时间：<2013-10-08 23:57:36></span>";
		document.getElementById("u2").appendChild(i);
		i=j; //将i装换为你数字

		i=document.createElement("hr");
		document.getElementById("u2").appendChild(i);
		i=j;
	}



	/*翻页DIV*****************************************/
	var page_listDiv=document.createElement("div");
	page_listDiv.setAttribute("id","page_list");
	page_listDiv.style.textAlign="center";
	document.getElementById("comment").appendChild(page_listDiv);

	var span1=document.createElement("span");
	span1.innerHTML="<a href='#' style='color: blue;text-decoration: none;'><span style='width:5px;height:5px;background: #939393;border:1px #B2B2B2 solid;font-size:16px;font-weight;bold;cursor:pointer'> << </span></a>&nbsp;&nbsp;&nbsp;&nbsp;";
	document.getElementById("page_list").appendChild(span1);


	var span2=document.createElement("span");
	span2.innerHTML="<a href='#' style='color: blue;text-decoration: none;'><span style='width:5px;height:5px;background: #939393;border:1px #B2B2B2 solid;font-size:16px;font-weight;bold;cursor:pointer'> < </span></a>&nbsp;&nbsp;&nbsp;&nbsp;";
	document.getElementById("page_list").appendChild(span2);

	var span3=document.createElement("span");
	span3.innerHTML="<a href='#' style='color: blue;text-decoration: none;'><span style='width:5px;height:5px;background: #939393;border:1px #B2B2B2 solid;font-size:16px;font-weight;bold;cursor:pointer'> > </span></a>&nbsp;&nbsp;&nbsp;&nbsp;";
	document.getElementById("page_list").appendChild(span3);


	var span4=document.createElement("span");
	span4.innerHTML="<a href='#' style='color: blue;text-decoration: none;'> <span style='width:5px;height:5px;background: #939393;border:1px #B2B2B2 solid;font-size:16px;font-weight;bold;cursor:pointer'> >> </span></a>&nbsp;&nbsp;&nbsp;&nbsp;";
	document.getElementById("page_list").appendChild(span4);



	/************关闭的制作************/
	var closeDiv=document.createElement("div");
	closeDiv.setAttribute("id","close");
	closeDiv.style.position="absolute";
	closeDiv.style.left=(screenWidth-600)/2+"px";
	closeDiv.style.top=scrollTop+13+"px";
	closeDiv.textAlign="right";
	closeDiv.style.padding="3px";
	closeDiv.style.background="#336699";
	closeDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
	closeDiv.style.opacity="0.75";
	closeDiv.style.border="3px solid #336699" ;
	closeDiv.style.height=18+"px";
	closeDiv.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
	closeDiv.style.color="white";
	closeDiv.style.cursor="pointer";
	closeDiv.style.zIndex="10001";
	closeDiv.innerHTML="关闭";
	closeDiv.onclick=removeObj;
	document.body.appendChild(closeDiv);

	function removeObj()
	{
		document.body.removeChild(closeDiv);
		document.getElementById("bgid").removeChild(commentDiv);
		document.body.removeChild(bgDiv);
		document.body.style.overflow="scroll";
	}



	var heights =[20,50,30];
	createCommentImage(heights);
	
	function createCommentImage(heights)
	{

		var canvass= document.getElementById("c");
		/****
		这里IE的兼容性不好 不支持动态添加的canvas
		***/
		//var  vml = new 
		//console.log(G_vmlCanvasManager);
		//console.log(window.CanvasRenderingContext2D());
		//return;
		//canvass=G_vmlCanvasManager.initElement(canvass);
		var c=canvass.getContext('2d');
		var colors = ["red","blue","green"];
		var texts  = ["好评","一般","差评"];
		var heights= heights;


		/*********画一条直线******/
		function createLine(x1,y1,x2,y2)
		{
  			c.beginPath();
  			c.moveTo(x1,y1);
  			c.lineTo(x2,y2);
  			c.stroke();
  			c.closePath();
		}

		/********画坐标轴*********/
		function createCoordinate()
		{
  			createLine(10,10,10,150);
  			createLine(10,150,200,150);
 			createLine(10,10,2,18);
  			createLine(10,10,18,18);
  			createLine(200,150,192,142);
  			createLine(200,150,192,158);
		}

		/**********画柱状条*********/
		function createBar(sx,sy,height,width,color)
		{
 			c.beginPath();
  			c.moveTo(sx,sy);
  			c.lineTo(sx,sy-height);
  			c.lineTo(sx+width,sy-height);
  			c.lineTo(sx+width,sy);
  			c.fillStyle=color;
  			c.fill();
  			c.closePath();
		}

		/********画图标*************/
		function createIcon()
		{
 			 for(var i=0;i<3;i++)
 			 	{
   				 	createSquare(200,20+30*i,10,colors[i],texts[i]);
  				}
		}

		/************画一个正方形******/
		function createSquare(x,y,width,color,text)
		{
		    c.beginPath();
 		    c.moveTo(x,y);
  		    c.lineTo(x+width,y);
  		    c.lineTo(x+width,y+width);
  			c.lineTo(x,y+width);
  			c.fillStyle=color;
  			c.fill();
  			c.closePath();

  			//  填写文字
  			c.fillStyle="black";
  			c.font="12px bold";
  			c.fillText(text,x+width+5,y+width/2+3);
		}


		/*******填充基本信息******/
		function fillT()
		{
 			 //设置字的属性
 			 c.fillStyle="black";
 			 c.font="12px bold";
  			//开始绘字
 			 var text = "(%)"
 			 c.fillText(text,16,25);

		}

		/****************填写百分比*********/
		function fillPercent(x,y,height)
		{
  			c.fillStyle="black";
  			c.font="12px";
  			var text = height+"%";
  			c.fillText(text,x+2,y-5);
		}

		/************生成图像*********/
		function creatImag()
		{
  			createCoordinate();
  			fillT();
  			createIcon();
  			for(var i=0;i<3;i++)
  			{
  			  createBar(45+i*45,150,heights[i],20,colors[i]);
  			  fillPercent(45+i*45,150-heights[i],heights[i]);
  			}
		}

		creatImag();
	}

}
